<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    {#在这里配置这个html文件相应的css文件#}
    <link rel=" stylesheet" type="text/css" href="static/css/index.css">
</head>
<body>
{#    导航栏#}
    <div style="background-color: rgb(255,255,255);height: 25px;padding: 15px 250px;">
        <a href="./" style="text-decoration: none;color: #000;font-size: 18px"><strong>文心小课堂</strong></a>
    </div>
{#导航栏以下#}
    <div style="display: flex;flex-direction: column;height: 100vh;">
        {#    上部分#}
        <div style="background-color: #F8F8FC;flex: 25%;text-align: center;">
            <h1 style="margin-top: 4%;font-family: '黑体';font-size: 40px;">新一代交互式知识学习引擎</h1>
            <form style="margin-top: 3%;">
                <div style="display: flex;justify-content: center;">
                    <div style="display: flex;justify-content: center;align-items: center">
                        <input placeholder="请输入你的问题" class="index_question" id="question">
                        <button class="btn" onclick="submitQuestion(this)">开始学习</button>
                    </div>
                </div>
            </form>
            <p>尝试输入“机器学习”等词汇</p>
        </div>

        {#    下部分#}
        <div style="background-color: #F8F8FC;flex: 75%;display: flex;flex-direction: column">
            {#上半部分#}
            <div style="flex:50%;display: flex;">
                {#左半部分#}
                <div style="flex: 50%;">
                    <a >
                        <div class = "carddiy" style="margin-left: 35%;">
                            <div class="top">
                                <svg xmlns="http://www.w3.org/2000/svg" class="svg2" height="1em" viewBox="0 0 576 512">
                                    <style> .svg2 {fill: #b197fc;height: 40px;width: 40px;}</style>
                                    <path d="M386.539 111.485l15.096 248.955-10.979-.275c-36.232-.824-71.64 8.783-102.657 27.997-31.016-19.214-66.424-27.997-102.657-27.997-45.564 0-82.07 10.705-123.516 27.723L93.117 129.6c28.546-11.803 61.484-18.115 92.226-18.115 41.173 0 73.836 13.175 102.657 42.54427.723-28.271 59.013-41.721 98.539-42.544zM569.07 448c-25.526 0-47.485-5.215-70.542-15.645-34.31-15.645-69.993-24.978-107.871-24.978-38.977 0-74.934 12.901-102.657 40.623-27.723-27.723-63.68-40.623-102.657-40.623-37.878 0-73.561 9.333-107.871 24.978C55.239 442.236 32.731 448 8.303 448H6.93L49.475 98.859C88.72676.626 136.486 64 181.775 64 218.83 64 256.984 71.685 288 93.095 319.016 71.685357.17 64 394.225 64c45.289 0 93.049 12.626 132.3 34.859L569.07 448zm-43.368-44.741l-34.036-280.246c-30.742-13.999-67.248-21.41-101.009-21.41-38.428 0-74.385 12.077-102.657 38.702-28.272-26.625-64.228-38.702-102.657-38.702-33.7610-70.267 7.411-101.009 21.41L50.298 403.259c47.211-19.487 82.894-33.486135.045-33.486 37.604 0 70.817 9.606 102.657 29.644 31.84-20.038 65.052-29.644102.657-29.644 52.151 0 87.834 13.999 135.045 33.486z"/>
                                </svg>
                            </div>
                            <div class="bottom">
                                <h3 class="botm_title" id = "title_box1"></h3>
                                <p class="botm_ph" id = "content_box1"></p>
                            </div>
                        </div>
                    </a>
                </div>
                {#右半部分#}
                <div style="flex: 50%;">
                    <a >
                        <div class = "carddiy" >
                            <div class="top">
                                <svg xmlns="http://www.w3.org/2000/svg" class="svg2" height="1em" viewBox="0 0 576 512">
                                    <style> .svg2 {fill: #b197fc;height: 40px;width: 40px;}</style>
                                    <path d="M386.539 111.485l15.096 248.955-10.979-.275c-36.232-.824-71.64 8.783-102.657 27.997-31.016-19.214-66.424-27.997-102.657-27.997-45.564 0-82.07 10.705-123.516 27.723L93.117 129.6c28.546-11.803 61.484-18.115 92.226-18.115 41.173 0 73.836 13.175 102.657 42.54427.723-28.271 59.013-41.721 98.539-42.544zM569.07 448c-25.526 0-47.485-5.215-70.542-15.645-34.31-15.645-69.993-24.978-107.871-24.978-38.977 0-74.934 12.901-102.657 40.623-27.723-27.723-63.68-40.623-102.657-40.623-37.878 0-73.561 9.333-107.871 24.978C55.239 442.236 32.731 448 8.303 448H6.93L49.475 98.859C88.72676.626 136.486 64 181.775 64 218.83 64 256.984 71.685 288 93.095 319.016 71.685357.17 64 394.225 64c45.289 0 93.049 12.626 132.3 34.859L569.07 448zm-43.368-44.741l-34.036-280.246c-30.742-13.999-67.248-21.41-101.009-21.41-38.428 0-74.385 12.077-102.657 38.702-28.272-26.625-64.228-38.702-102.657-38.702-33.7610-70.267 7.411-101.009 21.41L50.298 403.259c47.211-19.487 82.894-33.486135.045-33.486 37.604 0 70.817 9.606 102.657 29.644 31.84-20.038 65.052-29.644102.657-29.644 52.151 0 87.834 13.999 135.045 33.486z"/>
                                </svg>
                            </div>
                            <div class="bottom">
                                <h3 class="botm_title" id = "title_box2"></h3>
                                <p class="botm_ph" id = "content_box2"></p>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
            {#下半部分#}
            <div style="flex:50%;display: flex;">
                {#左半部分#}
                <div style="flex: 50%;">
                    <a >
                        <div class = "carddiy" style="margin-left: 35%;">
                            <div class="top">
                                <svg xmlns="http://www.w3.org/2000/svg" class="svg2" height="1em" viewBox="0 0 576 512">
                                    <style> .svg2 {fill: #b197fc;height: 40px;width: 40px;}</style>
                                    <path d="M386.539 111.485l15.096 248.955-10.979-.275c-36.232-.824-71.64 8.783-102.657 27.997-31.016-19.214-66.424-27.997-102.657-27.997-45.564 0-82.07 10.705-123.516 27.723L93.117 129.6c28.546-11.803 61.484-18.115 92.226-18.115 41.173 0 73.836 13.175 102.657 42.54427.723-28.271 59.013-41.721 98.539-42.544zM569.07 448c-25.526 0-47.485-5.215-70.542-15.645-34.31-15.645-69.993-24.978-107.871-24.978-38.977 0-74.934 12.901-102.657 40.623-27.723-27.723-63.68-40.623-102.657-40.623-37.878 0-73.561 9.333-107.871 24.978C55.239 442.236 32.731 448 8.303 448H6.93L49.475 98.859C88.72676.626 136.486 64 181.775 64 218.83 64 256.984 71.685 288 93.095 319.016 71.685357.17 64 394.225 64c45.289 0 93.049 12.626 132.3 34.859L569.07 448zm-43.368-44.741l-34.036-280.246c-30.742-13.999-67.248-21.41-101.009-21.41-38.428 0-74.385 12.077-102.657 38.702-28.272-26.625-64.228-38.702-102.657-38.702-33.7610-70.267 7.411-101.009 21.41L50.298 403.259c47.211-19.487 82.894-33.486135.045-33.486 37.604 0 70.817 9.606 102.657 29.644 31.84-20.038 65.052-29.644102.657-29.644 52.151 0 87.834 13.999 135.045 33.486z"/>
                                </svg>
                            </div>
                            <div class="bottom">
                                <h3 class="botm_title" id = "title_box3"></h3>
                                <p class="botm_ph" id = "content_box3"></p>
                            </div>
                        </div>
                    </a>
                </div>
                {#右半部分#}
                <div style="flex: 50%;">
                    <a >
                        <div class = "carddiy" >
                            <div class="top">
                                <svg xmlns="http://www.w3.org/2000/svg" class="svg2" height="1em" viewBox="0 0 576 512">
                                    <style> .svg2 {fill: #b197fc;height: 40px;width: 40px;}</style>
                                    <path d="M386.539 111.485l15.096 248.955-10.979-.275c-36.232-.824-71.64 8.783-102.657 27.997-31.016-19.214-66.424-27.997-102.657-27.997-45.564 0-82.07 10.705-123.516 27.723L93.117 129.6c28.546-11.803 61.484-18.115 92.226-18.115 41.173 0 73.836 13.175 102.657 42.54427.723-28.271 59.013-41.721 98.539-42.544zM569.07 448c-25.526 0-47.485-5.215-70.542-15.645-34.31-15.645-69.993-24.978-107.871-24.978-38.977 0-74.934 12.901-102.657 40.623-27.723-27.723-63.68-40.623-102.657-40.623-37.878 0-73.561 9.333-107.871 24.978C55.239 442.236 32.731 448 8.303 448H6.93L49.475 98.859C88.72676.626 136.486 64 181.775 64 218.83 64 256.984 71.685 288 93.095 319.016 71.685357.17 64 394.225 64c45.289 0 93.049 12.626 132.3 34.859L569.07 448zm-43.368-44.741l-34.036-280.246c-30.742-13.999-67.248-21.41-101.009-21.41-38.428 0-74.385 12.077-102.657 38.702-28.272-26.625-64.228-38.702-102.657-38.702-33.7610-70.267 7.411-101.009 21.41L50.298 403.259c47.211-19.487 82.894-33.486135.045-33.486 37.604 0 70.817 9.606 102.657 29.644 31.84-20.038 65.052-29.644102.657-29.644 52.151 0 87.834 13.999 135.045 33.486z"/>
                                </svg>
                            </div>
                            <div class="bottom">
                                <h3 class="botm_title" id = "title_box4"></h3>
                                <p class="botm_ph" id = "content_box4"></p>
                            </div>
                        </div>
                    </a>
                </div>
            </div>

        </div>
    </div>
    <script>
        let question = "";
        function submitQuestion(buttonElement) {
            const questionInput = document.getElementById('question').value.trim(); // 通过id来获取数据框中的文本
            if(questionInput==""){ // 如果输入的内容为空，直接返回
                return;
            }
            // 将问题赋值给 question 变量
            question = questionInput;
            // 禁用按钮
            buttonElement.innerText = "正在加载中……"
            buttonElement.disabled = true
            fetch(`/ask?question=${encodeURIComponent(question)}`) // 问号后面是否可以是多个参数的request？然后函数从request中取得想要的参数
                .then(response => response.json())
                .then(data => {
                    const moduleTitles = []
                    const moduleContents = []
                    for (let i = 0;i<data.length;i++){
                        let moduleTitle = data[i]["模块主题"]
                        let moduleContent = data[i]["本模块内容简介"]
                        moduleTitles.push(moduleTitle)
                        moduleContents.push(moduleContent)
                        document.getElementById(`title_box${i+1}`).innerText = moduleTitle
                        document.getElementById(`content_box${i+1}`).innerText = moduleContent
                    }
                    buttonElement.innerText = "开始学习"
                    buttonElement.disabled = false
                })
                .catch((error) => {
                    console.error('Error:', error);
                });
        }
    </script>


</body>
</html>